<template>
  <!-- 首页产品信息 -->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="产品类型" prop="typeId">
        <el-select v-model="queryParams.typeId" placeholder="请选择类型" clearable>
          <el-option v-for="item in typelist" :key="item.id" :label="item.typeName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="add-box">
      <el-button type="primary" plain size="mini" @click="addProduct">添加产品</el-button>
      <el-button type="warning" plain size="mini" @click="handleDel()">删除产品</el-button>
    </div>

    <!-- 表格 -->
    <el-table v-loading="loading" border :data="dataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="类型" align="center" prop="typeId">
        <template slot-scope="scope">
          {{ getTypeName(scope.row.typeId) }}
        </template>
      </el-table-column>
      <el-table-column label="子类型" align="center" prop="childrenTypeName">
        <template slot-scope="scope">
          {{ scope.row.childrenTypeName }}
        </template>
      </el-table-column>
      <el-table-column label="产品名称" align="center" prop="productName" />
      <el-table-column label="产品链接" align="center" prop="productUrl" />
      <el-table-column label="产品简介" align="center" prop="productIntroduction" />
      <el-table-column label="序号" align="center" prop="sort" />
      <el-table-column label="产品状态" align="center" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status == 1 ? '上架' : '下架' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button type="text" size="mini" @click="handleDel(scope.row)">删除</el-button>
          <el-button type="text" size="mini" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页  -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.params.pageNum"
      :limit.sync="queryParams.params.pageSize" @pagination="getList" />

    <!-- 添加 & 修改 -->
    <el-dialog :title="addForm.id ? '修改分类' : '添加分类'" :visible.sync="addShow" width="40%" :close-on-click-modal="false">
      <el-form ref="addForm" :model="addForm" label-width="100px" :rules="rules">
        <el-form-item label="类型" prop="typeId">
          <el-select v-model="addForm.typeId" placeholder="请选择类型" @change="chooseType" clearable >
            <el-option v-for="item in typelist" :key="item.id" :label="item.typeName" :value="item.id" :disabled="item.status == 2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="子类型" prop="childrenTypeId" v-if="isHave" @change="chooseTypeChild">
          <el-select v-model="addForm.childrenTypeId" placeholder="请选择子类型" clearable>
            <el-option v-for="item in childList" :key="item.id" :label="item.typeName" :value="item.id" :disabled="item.status == 2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="addForm.productName"></el-input>
        </el-form-item>
        <el-form-item label="产品链接" prop="productUrl">
          <el-input v-model="addForm.productUrl"></el-input>
        </el-form-item>
        <el-form-item label="产品简介" prop="productIntroduction">
          <el-input v-model="addForm.productIntroduction"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="sort">
          <el-input v-model="addForm.sort"></el-input>
        </el-form-item>
        <el-form-item label="产品状态" prop="status">
          <el-radio-group v-model="addForm.status">
            <el-radio label="1">上架</el-radio>
            <el-radio label="2">下架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="addHandleSure">确 定</el-button>
        <el-button @click="cancelForm">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="detailShow" width="50%" :close-on-click-modal="false">
      <el-form :model="detailRow" label-width="100px">
        <div class="flex">
          <div>
            <el-form-item label="类型">{{ getTypeName(detailRow.typeId) || "-" }}</el-form-item>
            <el-form-item label="产品状态"> {{ detailRow.status == 1 ? '上架' : '下架' || "-" }} </el-form-item>
          </div>
          <div>
            <el-form-item label="产品名称">{{ detailRow.productName || "-" }}</el-form-item>
          </div>
        </div>
        <el-form-item label="产品链接">{{ detailRow.productUrl || "-" }}</el-form-item>
        <el-form-item label="产品简介">{{ detailRow.productIntroduction || "-" }}</el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="detailShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { homeProductList, addHomeProduct, updateHomeProduct, delHomeProduct } from "@/api/configManagement/homeProductInformation";
import { homeProductTypeList, childrenList } from "@/api/configManagement/homeProductType";

export default {
  data() {
    return {
      loading: false, // 遮罩层
      showSearch: true, // 显示搜索条件
      total: 0, // 总条数
      dataList: [], // 充值管理表格数据
      // 查询参数
      queryParams: {
        productName: '',
        typeId: '',
        params: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      detailRow: {},//详情内容
      detailShow: false,//详情弹窗开关
      addShow: false,//添加弹窗开关
      addForm: {},//添加的内容
      rules: {//添加表单验证
        productName: [
          { required: true, message: '请输入产品名称', trigger: 'change' }
        ],
        productUrl: [
          { required: true, message: '请输入产品链接', trigger: 'change' }
        ],
        typeId: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        childrenTypeId: [
          { required: true, message: '请选择子类型', trigger: 'change' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'change' }
        ],
        productIntroduction: [
          { required: true, message: '请输入产品简介', trigger: 'change' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择产品状态', trigger: 'change' }
        ],
      },
      typelist: [],//激活的类型列表
      typelistAll:[],//所以的类型
      childList: [],//子类列表
      isHave: false,//是否有子类
    };
  },
  created() {
    //获取表格数据
    this.getList();
    //获取类型列表
    this.getTypeList();
  },
  methods: {
    /**选择子类型 */
    chooseTypeChild(val) {
      // console.log(val,'===');
      // this.$forceUpdate();
    },
    /**选择类型 */
    chooseType(val) {
      this.getChildList(val);
      this.isHave = this.typelist.find(item => item.id == val)?.haveChildren == '1' ? true : false;
      if (!this.isHave) {
        this.addForm.childrenTypeId = '';
      }
    },
    /**查询子类列表 */
    getChildList(parentId) {
      let data = {
        parentId,
        params: {
          pageNum: 1,
          pageSize: 100
        }
      }
      childrenList(data).then(res => {
        if (200 == res.code) {
          this.childList = res.data;
        }
      })
    },
    /**多选 */
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
    },
    /**删除分类 */
    handleDel(row) {
      let id = row ? [row.id] : this.ids;
      this.$modal.confirm(`是否确认删除该产品?`).then(() => {
        delHomeProduct(id).then(res => {
          if (200 == res.code) {
            this.getList();
            this.$message.success('删除成功！');
          }
        })
      }).catch(() => { });
    },
    /**获取类型列表 */
    getTypeList() {
      let data = {
        // status: 1,
        params: {
          pageNum: 1,
          pageSize: 100
        }
      }
      homeProductTypeList(data).then((res) => {
        if (200 == res.code) {
          this.typelistAll = res.rows;
          // this.typelist = res.rows.filter(item => item.status == 1);
          this.typelist = res.rows;
        }
      })
    },
    /**获取类型的名字 */
    getTypeName(val) {
      return this.typelistAll.filter(item => item.id == val)[0]?.typeName;
    },
    /**打开添加产品信息弹窗 */
    addProduct() {
      this.isHave = false;
      this.addShow = true;
      this.addForm = {};
      this.resetForm('addForm');
    },
    /**打开修改弹窗 */
    handleUpdate(row) {
      this.addShow = true;
      this.addForm = Object.assign({}, row);
      this.isHave = this.typelist?.find(item => item.id == row.typeId)?.haveChildren == '1' ? true : false;
      this.getChildList(row.typeId);
    },
    /**确认添加 & 修改 */
    addHandleSure() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          let axios = this.addForm.id ? updateHomeProduct : addHomeProduct;
          axios(this.addForm).then(res => {
            if (200 == res.code) {
              this.getList();
              this.addShow = false;
              this.$message.success(this.addForm.id ? '修改类型成功' : '添加分类成功');
            }
          })
        }
      });
    },
    /**关闭添加 & 修改对话框 */
    cancelForm() {
      this.resetForm('addForm');
      this.addShow = false;
    },
    /**查看详情 */
    handleView(row) {
      this.detailRow = Object.assign({}, row);
      this.detailShow = true;
    },
    /** 查询首页产品信息列表 */
    getList() {
      this.loading = true;
      homeProductList(this.queryParams)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.params.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>

<style lang="scss" scoped>
.add-box {
  margin-bottom: 20px;
}

.flex {
  display: flex;

  >div {
    flex: 1;
  }
}

.el-select {
  width: 100%;
}
</style>
